<template>
  <div class="common-container">
    <el-container>
      <el-aside class="aside-container">
        <el-header class="header-container"> 图标 </el-header>
        <el-menu
          class="custom-menu"
          default-active="1"
          :collapse="!isCollapse"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item index="1" class="custom-menu-item">
            <el-icon><HomeFilled /></el-icon>
            <template #title>主页</template>
          </el-menu-item>
          <el-menu-item index="2" class="custom-menu-item">
			<el-icon><VideoCamera /></el-icon>
            <template #title>视频工具</template>
          </el-menu-item>
          <el-menu-item index="3" class="custom-menu-item">
           <el-icon><Mic /></el-icon>
            <template #title>音频工具</template>
          </el-menu-item>
          <el-menu-item index="4" class="custom-menu-item">
            <el-icon><Picture /></el-icon>
            <template #title>图片工具</template>
          </el-menu-item>
          <el-menu-item index="5" class="custom-menu-item">
            <el-icon><Document /></el-icon>
            <template #title>文档处理</template>
          </el-menu-item>
          <el-menu-item index="6" class="custom-menu-item">
            <el-icon><Notebook /></el-icon>
            <template #title>文档转换</template>
          </el-menu-item>
          <el-menu-item index="7" class="custom-menu-item">
            <el-icon><PieChart /></el-icon>
            <template #title>数据图表</template>
          </el-menu-item>
          <el-menu-item index="8" class="custom-menu-item">
            <el-icon><Files /></el-icon>
            <template #title>办公辅助</template>
          </el-menu-item>
          <el-menu-item index="9" class="custom-menu-item">
            <el-icon><DocumentCopy /></el-icon>
            <template #title>文本工具</template>
          </el-menu-item>
          <el-menu-item index="10" class="custom-menu-item">
            <el-icon><Lock /></el-icon>
            <template #title>加密工具</template>
          </el-menu-item>
          <el-menu-item index="11" class="custom-menu-item">
            <el-icon><Switch /></el-icon>
            <template #title>单位转换</template>
          </el-menu-item>
        </el-menu>
        <el-footer class="footer-container">
          <el-icon><Expand /></el-icon>
        </el-footer>
      </el-aside>
      <el-main class="main-container">Main</el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {VideoCamera, HomeFilled, Mic, Picture, Document, Notebook, PieChart, Files, DocumentCopy, Lock, Switch, Menu as IconMenu, Expand } from '@element-plus/icons-vue'

const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped lang="stylus">
.common-container {
  top: 0;
  bottom: 0;
  width: 100%;
  min-height: 100vh;
  background: #F2F5FF;

  .aside-container {
    .header-container {
      el-header-padding: 0px;
      el-header-height: 60px;
      min-height: 80px;
    }

    width: 200px;
    height: 100vh;
    min-height: 100vh;

    .custom-menu {
      /* 设置菜单项的高度 */
      .custom-menu-item {
        height: 45px; /* 你想要的高度 */
        line-height: 45px; /* 垂直居中文本 */
      }
    }

    .footer-container {
      margin: 0px;
      position: absolute;
      bottom: 10px;
      min-height: 10px;
      width: 195px;
    }
  }

  .main-container {
    background-color: red;
  }
}
</style>
